<script setup>
import * as Cesium from 'cesium'
import '../Widgets/widgets.css'
import { onMounted } from 'vue'

// 设置Cesium静态资源访问路径
window.CESIUM_BASE_URL = '/'

// 设置Cesium的token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZThjMWE2Yi1jNmY3LTRhNWQtYjY1Ny03ZGQ3ZDE1MzE1YmUiLCJpZCI6Mjk0NTE4LCJpYXQiOjE3NDQ3ODUwODV9.WazODcZ2zsmux-PKcQwSbeiBjYNRW93WV3JNB_ngOTE'

// 设置默认视角在南昌市
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  115.8, // 西经
  28.8, // 南纬
  117.2, // 东经
  30.2 // 北纬
)

// 图层对象
const layerObj = {
  aMap1: new Cesium.UrlTemplateImageryProvider({
    url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    name: '高德影像图'
  }),
  aMap2: new Cesium.UrlTemplateImageryProvider({
    url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    name: '高德矢量地图'
  }),
  aMapRoadNetwork: new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    name: '高德路网图'
  }),
  googleImagery: new Cesium.UrlTemplateImageryProvider({
    url: 'https://mt{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
    name: 'Google Imagery',
    subdomains: ['0', '1', '2', '3']
  }),
  // arcgis的添加不上（其他的处理高德也没用 - -）
  esriImagery: new Cesium.UrlTemplateImageryProvider({
    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    name: 'ESRI World Imagery'
  }),
  stamenTonerImagery: new Cesium.UrlTemplateImageryProvider({
    url: 'https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
    name: 'Stamen Toner',
    subdomains: ['a', 'b', 'c', 'd']
  }),
  mapboxImagery: new Cesium.UrlTemplateImageryProvider({
    url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=Your-Mapbox-API-Key',
    name: 'Mapbox Satellite'
  })
}

onMounted(async () => {
  // 创建实例
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 可选，关闭信息框
    sceneModePicker: true,  // 可选，关闭场景模式选择器
    timeline: false, // 可选，关闭时间轴
    navigationHelpButton: false, // 可选，关闭导航帮助按钮
    baseLayerPicker: false, // 可选，关闭图层选择器
    homeButton: true, // 可选，关闭主页按钮
    geocoder: true, // 可选，搜索
    fullscreenButton: false, // 可选，关闭全屏按钮
    vrButton: false, // 可选，关闭 VR 按钮
    animation: false, // 可选，关闭动画
    terrainProvider: await Cesium.createWorldTerrainAsync({
      // requestWaterMask: true, // 可选，开启水波纹
      // requestVertexNormals: true, // 可选，开启法线
    }) // 可选，开启全球地形
  })

  // viewer.imageryLayers.addImageryProvider(layerObj.esriImagery);
  // 底图叠加
  const AMap2Layer = viewer.imageryLayers.addImageryProvider(layerObj.aMap2);
  // 设置透明度
  // AMap2Layer.alpha = 0;
  // viewer.imageryLayers.addImageryProvider(layerObj.aMapRoadNetwork);

  // 获取版权显示对象
  // const creditsDisplay = document.querySelector('.cesium-viewer-bottom');
  // creditsDisplay.style.display = 'none';
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 搜索按钮圆角
  const creditsDisplay = document.querySelector('.cesium-geocoder-input');
  creditsDisplay.style.borderRadius = '5px';


  // 设置试图 setView/flyTo
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(115.8811, 28.6500, 200000), // 高度单位/米
    duration: 3, // 秒
    // cesium构建的是一个三维场景，视角应该有3个角度（方位角、俯仰角、翻滚角）
    orientation: {
      heading: Cesium.Math.toRadians(0), // 方位角
      pitch: Cesium.Math.toRadians(-90), // 俯仰角
      roll: Cesium.Math.toRadians(0) // 翻滚角
    }
  })

  // #region 添加实体
  /**
   * 可以添加多种实体
   * billboard: 图标
   * label: 文本
   * point: 点
   * polygon: 多边形
   * polyline: 线
   * ellipsoid: 球体
   * ellipse: 椭圆
   * model: 3D模型
   * primtive: 原始图形
   * box: 盒子
   * cylinder: 圆柱体
   * wall: 墙体
   * corridor: 管道
   * polylineVolume: 体积折线
   * 等
   */

  // 添加点
  // const point = viewer.entities.add({
  //   id: 'point1',
  //   position: Cesium.Cartesian3.fromDegrees(115.9, 28.7, 10),
  //   point: {
  //     color: Cesium.Color.BLUE,
  //     pixelSize: 10,// px
  //     outlineColor: Cesium.Color.WHITE,
  //     outlineWidth: 2,// px
  //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
  //   }
  // })
  // 添加文字标注
  // const label = viewer.entities.add({
  //   id: 'label1',
  //   position: Cesium.Cartesian3.fromDegrees(115.9, 28.7, 10),

  // })
  // 添加贴图
  // const logo = viewer.entities.add({
  //   id: 'twg',
  //   description: '滕王阁',
  //   position: Cesium.Cartesian3.fromDegrees(115.9, 28.7, 10),
  //   billboard: {
  //     image: '/images/twg.png',
  //     width: 50,
  //     height: 50,
  //     pixelOffset: new Cesium.Cartesian2(0, 20),
  //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000),
  //   },
  // })
  // 添加模型
  // const model = viewer.entities.add({
  //   id: 'plane',
  //   position: Cesium.Cartesian3.fromDegrees(115.85, 28.7, 2000),
  //   model: {
  //     uri: '/model/plane.glb',
  //     minimumPixelSize: 100,
  //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000),
  //     pixelOffset: new Cesium.Cartesian2(-150, 0)
  //   },
  // })
  // #endregion


  // 获取ScreenSpaceEventHandler对象
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)

  // 监听鼠标左键点击事件
  handler.setInputAction((click) => {
    console.log(click)
    // 获取点击位置的笛卡尔坐标
    const cartesian = viewer.scene.pickPosition(click.position);

    // 确保点击位置有效
    if (Cesium.defined(cartesian)) {
      // 将笛卡尔坐标转为地理坐标（经纬度）
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const latitude = Cesium.Math.toDegrees(cartographic.latitude);  // 纬度
      const longitude = Cesium.Math.toDegrees(cartographic.longitude);  // 经度
      const altitude = cartographic.height;  // 高度

      // 打印经纬度和高度
      console.log(`经度: ${longitude}, 纬度: ${latitude}, 高度: ${altitude}`);
    } else {
      console.log('点击位置无效，无法获取经纬度');
    }

  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  // 绘制南昌市边界
  maskInvertSelect(viewer)

})

/** 遮罩反选 */
function maskInvertSelect (viewer) {
  fetch('/public/nanchang.geojson')
    .then(res => res.json())
    .then(data => {
      const { features } = data
      const holesArr = []
      features.map((item) => {
        item.geometry.coordinates.map((chunk) => {
          const points = chunk.flat(3)
          const maskPoint = Cesium.Cartesian3.fromDegreesArray(points)
          holesArr.push({ positions: maskPoint })
          // 绘制区域边界
          const line = new Cesium.Entity({
            polyline: {
              positions: maskPoint,
              material: Cesium.Color.fromCssColorString("#6dcdeb"), //边界线颜色,
              clampToGround: true, // 贴地
              width: 3,
            }
          })
          viewer.entities.add(line);
        })
      })

      const area = new Cesium.Entity({
        polygon: {
          hierarchy: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              80, 0, 80, 40, 130, 40, 130, 0,
            ]),
            holes: holesArr,
          },
          // 填充多边形的材质
          material: Cesium.Color.BLACK.withAlpha(0.9),
        }
      })
      viewer.entities.add(area);



    })
    .catch(err => console.log(err))
}



</script>

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
</template>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
